// 为整个应用提供分辨率自适应：根据窗口宽度与 DPR 设置 CSS 变量与断点 class

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '3xl'

function getBreakpoint(width: number): Breakpoint {
	if (width < 576) return 'xs'
	if (width < 768) return 'sm'
	if (width < 992) return 'md'
	if (width < 1200) return 'lg'
	if (width < 1600) return 'xl'
	if (width < 2560) return 'xxl'
	return '3xl' // 2560+，覆盖 2880x1800 等高分辨率
}

function applyVars(bp: Breakpoint, dpr: number) {
	const root = document.documentElement

	// 基础字号：随断点略微增大；在高 DPR 屏幕再略增
	const baseFontMap: Record<Breakpoint, number> = {
		xs: 13, sm: 13, md: 14, lg: 14, xl: 15, xxl: 16, '3xl': 18
	}
	const base = baseFontMap[bp]
	const fontSize = Math.round(base * Math.min(Math.max(dpr, 1), 2)) // 在 1~2 之间

	const pagePaddingMap: Record<Breakpoint, string> = {
		xs: '8px', sm: '12px', md: '16px', lg: '20px', xl: '24px', xxl: '28px', '3xl': '32px'
	}

	root.style.setProperty('--app-font-size-base', fontSize + 'px')
	root.style.setProperty('--app-page-padding', pagePaddingMap[bp])
	// 大屏时放宽最大宽度，减少左右留白；中小屏维持较窄便于阅读
	const maxWidth = bp === '3xl' ? '2200px' : bp === 'xxl' ? '1800px' : bp === 'xl' ? '1600px' : '1400px'
	root.style.setProperty('--app-container-max-width', maxWidth)

	root.classList.remove('bp-xs','bp-sm','bp-md','bp-lg','bp-xl','bp-xxl','bp-3xl')
	root.classList.add(`bp-${bp}`)
}

export function useResponsive() {
	const update = () => {
		const width = window.innerWidth
		const dpr = window.devicePixelRatio || 1
		applyVars(getBreakpoint(width), dpr)
	}
	update()
	window.addEventListener('resize', update)
	return { update }
}


